<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 780px;
				height: 1200px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="机会主题">
					<el-col :span="8">
						<el-form-item prop="theme">
							<el-input v-model="form.theme"></el-input>
						</el-form-item>
						
						<!-- <el-form-item prop="oppid">
							<el-input v-model="form.oppid" disabled></el-input>
						</el-form-item> -->
					</el-col>
					<el-col :span="9" :offset="3">
						<el-form-item label="更新日期" prop="dates">
							<el-date-picker type="date" disabled placeholder="选择日期" v-model="form.dates" style="width: 100%;">更新时间</el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>

				<el-form-item label="客户">

					<el-col :span="8">
						<el-form-item pror="custname">
							<el-input v-model="form.custname" disabled></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12" :offset="3">
						<el-form-item label="状态" pror="state">
							<el-select v-model="form.state" placeholder="请选择">
								<el-option  :key="3111" label="跟踪" :value="3111"></el-option>	
	                           <el-option  :key="3112" label="成功" :value="3112"></el-option>
	                           <el-option  :key="3113" label="搁置" :value="3113"></el-option>
	                           <el-option  :key="3114" label="失效" :value="3114"></el-option>	
							</el-select>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item>
					
					
					<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect">
												<template slot-scope="{ item }">
  														  <div class="name">{{ item.cus_name }}({{ item.cus_company}})</div>
												  </template>
												</el-autocomplete>
				</el-form-item>
				<el-form-item>
					<el-col :span="2" :offset="9">
						基本情况
					</el-col>
				</el-form-item>
				<el-form-item label="联系人">
					<el-col :span="10">
						<el-form-item prop="linkman">
							<template>
								<el-select v-model="form.linkman" placeholder="请选择" @change="cha()">
									<el-option  v-for="item in customertoman":key="item.linId":label="item.linName":value="item.linId">
								</el-select>
							</template>
							<el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="类型" prop="type">
							<template>
								<el-select v-model="form.type" placeholder="请选择">
									<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
	                           <el-option  :key="3121" label="办公建筑" :value="3121"></el-option>	
	                           <el-option  :key="3122" label="住宅建筑" :value="3122"></el-option>
	                           <el-option  :key="3123" label="商业建筑" :value="3123"></el-option>
	                           <el-option  :key="3124" label="医疗建筑" :value="3124"></el-option>						
								</el-select>
							</template>
						</el-form-item>
					</el-col>
					</el-form-item>
					<el-form-item label="发现时间">
						<el-col :span="8">
							<el-form-item prop="lookdates">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.lookdates" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions1"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="11" :offset="2">
							<el-form-item label="来源" prop="laiyuan">
								<template>
									<el-select v-model="form.laiyuan" placeholder="请选择">
										<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
										<el-option :key="3161"  label="电话来访" :value="3161"> </el-option>
										<el-option :key="3162"  label="客户介绍" :value="3162"> </el-option>
										<el-option :key="3163"  label="老客户" :value="3163"> </el-option>
										<el-option :key="3164"  label="合作伙伴" :value="3164"> </el-option>
										<el-option :key="3165"  label="互联网" :value="3165"> </el-option>
										<el-option :key="3166"  label="媒体" :value="3166"> </el-option>
									</el-select>
								</template>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label="客户需求" prop="demand">
					  <el-col :span="22">
						<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.demand">
						</el-input>
					</el-col>
					</el-form-item>
					<el-form-item>
						<el-col :span="2" :offset="9">
							预期情况
						</el-col>
					</el-form-item>
					<el-form-item label="预期时间">
						<el-col :span="9">
							<el-form-item prop="exdate">
								<el-date-picker   type="date" placeholder="选择日期" v-model="form.exdate" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions2"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="9" :offset="1">
							<el-form-item label="可能性" prop="possbity">
								<template>
									<el-select v-model="form.possbity" placeholder="请选择">
										<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
										<el-option :key="10"  label="10%" :value="10"> </el-option>
										<el-option :key="20"  label="20%" :value="20"> </el-option>
										<el-option :key="30"  label="30%" :value="30"> </el-option>
										<el-option :key="40"  label="40%" :value="40"> </el-option>
										<el-option :key="50"  label="50%" :value="50"> </el-option>
										<el-option :key="60"  label="60%" :value="60"> </el-option>
										<el-option :key="70"  label="70%" :value="70"> </el-option>
										<el-option :key="80"  label="80%" :value="80"> </el-option>
										<el-option :key="90"  label="90%" :value="90"> </el-option>
										<el-option :key="100" label="100%" :value="100"> </el-option>
									</el-select>
								</template>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label="预期金额" prop="exprice">
						<el-col :span="8">
							<el-input v-model="form.exprice"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-col :span="2" :offset="9">
							当前状态
						</el-col>
					</el-form-item>
					<el-form-item label="阶段" prop="stage">
						<el-col :span="9">
							<template>
								<el-select v-model="form.stage" placeholder="请选择">
									<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
								      <el-option :key="3151" label="初期沟通" :value="3151"></el-option>
								      <el-option :key="3152" label="方案制定" :value="3152"></el-option>
								      <el-option :key="3153" label="商务谈判" :value="3153"></el-option>
								      <el-option :key="3154" label="合同签约" :value="3154"></el-option>
								</el-select>
							</template>
						</el-col>
						<el-col :span="9" :offset="1">
							<el-form-item label="优先级" prop="youxian">
								<template>
									<el-select v-model="form.youxian" placeholder="请选择">
										<!-- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> -->
									  <el-option :key="3131" label="一般" :value="3131"></el-option>
								      <el-option :key="3132" label="优先" :value="3132"></el-option>
								      <el-option :key="3133" label="首选" :value="3133"></el-option>
									</el-select>
								</template>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
						<el-button @click="resetForm('form')">重置</el-button>
					</el-form-item>
			</el-form>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						customertoman:[],
						pickerOptions1: { //时间做约束
							disabledDate(time) {
								return time.getTime() > Date.now() - 8.64e6;
							}
						},
						pickerOptions2: { //时间做约束
							disabledDate(time) {
								return time.getTime() < Date.now() - 8.64e6;
							}
						},
						form: {
							theme: '',
							oppid:'',
							dates:'',
							custname: '',
							custid: '',
							state: '',
							type: '',
							lookdates: '',
							linkman: '',
							laiyuan: '',
							demand: '',
							exdate: '',
							possbity: '',
							exprice: '',
							youxian: '',
							stage: '',
							linid:'',
							restaurants: []
						},
						rules: { //数据源model
							theme: [{
								required: true,
								message: '请输入机会主题',
								trigger: 'blur'
							}],

							custname: [{

								required: true,
								message: '请选择客户',
								trigger: 'blur'
							}],
							state: [
								//数据类型要是date
								{

									required: true,
									message: '请选择程度',
									trigger: 'blur'
								}
							],
							type: [{

								required: true,
								message: '请选择客户',
								trigger: 'blur'
							}],
							
							lookdates: [
								//数据类型要是date
								{
									type: 'date',
									required: true,
									message: '请选择时间',
									trigger: 'blur'
								}
							],
							exdate: [
								//数据类型要是date
								{
									type: 'date',	
									required: true,
									message: '请选择时间',
									trigger: 'blur'
								}
							],
							exprice:  [
								{  min:0,max:100000,message: '超过金额',  trigger: 'blur'},
								   {pattern: /^[0-9]*$/, message: '金额有误'}],
							laiyuan: [{
								required: true,
								message: '请选择来源',
								trigger: 'blur'
							}],
							youxian: [{

								required: true,
								message: '请选择优先级',
								trigger: 'blur'
							}],
							stage: [{
								required: true,
								message: '请选择阶段',
								trigger: 'blur'
							}],

							possbity: [
								//数据类型要是date
								{
									required: true,
									message: '请选择程度',
									trigger: 'blur'
								}
							]
						}
					}
				},
				methods: {
					submitForm(formName) {
						
						//验证方法
						this.$refs[formName].validate((valid) => {
							
							if(valid) {

								var ax = null;
								if (JSON.stringify(${addopports}) == '{}') {
									 alert(ax+"ssss");
									ax = "/addopportunity";
								}else{
								      ax = "/updateopportunity";
									
									 alert(ax+"ssss");
								}
								
								//post提交数据
								axios.post(ax,
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									window.parent.location.replace("/opport");
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					
					querySearch: function(queryString, cb) {
						 var allarr = this.form.restaurants;
				    	 // console.info(allarr);
				    	 
							var newsarr = [];
							allarr.forEach(v => {
								 var strs =v.cus_name+"";
								 if (strs.indexOf(queryString) >= 0) {
										newsarr.push(v);
										console.info(strs);
										console.info(v);
									} 
							})
							// 调用 callback 返回建议列表的数据
							cb(newsarr);
					},
					handleSelect: function(it) {
						console.log(it.cus_name);
						this.form.custname=it.cus_name;
						this.form.custid=it.cus_id;
						 var iosnn=this;
					        
							//post提交数据
							axios.post("/onSale/findByCoustomerName",
								//参数转换
								Qs.stringify(this.form, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.customertoman = v.data.custo;
								console.info(v.data); 
								
							}).catch(function(e) {
								alert("出错了"+e);
							});
					},
					cha: function(it) {
						this.form.linid = it;
					}
				},
				
				mounted() {
					//console.log(dic); 
					var mas=${mansitem};
					this.form.restaurants = mas;
					//console.log(this.form.restaurants); 
					var opport = ${addopports};
						if(opport){
							var news = ${addopports};
						}
						console.log(opport);
					 this.form.theme = news.opp_name;  
					 this.form.oppid = news.opp_ids;
					 this.form.dates = news.opp_date;
					 this.form.custname = news.cus_name;
					 this.form.custid = news.cus_id;
					 this.form.state = news.opp_state;
					 this.form.type = news.opp_type;
					 this.form.lookdates = news.opp_discover_time;
					 this.form.linkman = news.lin_id;
					 this.form.laiyuan = news.opp_source; 
					 this.form.demand =  news.opp_need;
					 this.form.exdate = news.opp_sign_date;
					 this.form.possbity =  news.opp_possible;
					 this.form.exprice =  news.opp_money;
					 this.form.youxian = news.opp_priority;
					 this.form.stage =  news.opp_stage;
						
				} 
				
			});
		</script>
	</body>

</html>